<template>
  <div class="about">
    <div style="width: 400px;margin: 100px auto">
      <b>远程聊天记录</b>
      <el-input type="textarea" :rows="4" style="margin-top: 20px;" v-model="net">

      </el-input>
      <div style="margin-top: 50px"></div>
      <b>您的聊天内容</b>
      <el-input type="textarea" :rows="4" style="margin-top: 20px;" v-model="local">

      </el-input>
      <el-button type="primary" style="margin-top: 20px" @click="sendData()">发送</el-button>


    </div>
  </div>
</template>
<script>
  export default {
    name: 'websocket',
    data(){
      return {
        net: '',
        local: '',
        ws: null
      }
    },
    methods: {
      sendData(){
        this.ws.send(this.local)
      },
      wsInit(){
        let _this = this
        this.ws = new WebSocket("ws://127.0.0.1:2348");
        this.ws.onopen = function() {
          // alert("连接成功");
          _this.ws.send('tom');
          // alert("给服务端发送一个字符串：tom");
          console.log('连接成功');
        };
        this.ws.onmessage = function(e) {
          // alert("收到服务端的消息：" + e.data);
          console.log(e.data);
          _this.net = e.data
          // _this.net = JSON.parse(e.data).id
        };
      }
    },
    mounted() {
      this.wsInit()
    }
  }

</script>
